{% extends 'base.html' %}
{% load static %}

{% block title %}{{ question.title }}{% endblock %}

{% block css %}
    <link href="{% static 'css/qa.css' %}" rel="stylesheet">
{% endblock css %}

{% block content %}

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'news:list' %}">首页</a></li>
            <li class="breadcrumb-item"><a href="{% url 'qa:unanswered_q' %}">问答</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ question.title }}</li>
        </ol>
    </nav>
    <div class="page-header">
        <a href="{% url 'qa:ask_question' %}" class="btn btn-primary pull-right">
            <i class="fa fa-pencil" aria-hidden="true"></i> 提问
        </a>
        <h4>{{ question.title }}</h4>
    </div>

    <div class="row question" question-id="{{ question.id }}">
        <div class="col-md-1">
            <div class="question-info options">
                <h3 class="{% if question.has_answer %}bg-success text-white{% endif %}">{{ question.count_answers }}</h3>
                <small class="text-secondary">回答</small>
                <i id="questionUpVote" class="fa fa-chevron-up vote up-vote question-vote{% if request.user in question.get_upvoters %} vote
                d{% endif %}"
                   aria-hidden="true" title="单击赞同，再次点击取消"></i>
                <h3 id="questionVotes">{{ question.total_votes }}</h3>
                <i id="questionDownVote" class="fa fa-chevron-down vote down-vote question-vote{% if request.user in question.get_downvoters %} voted
{% endif %}" aria-hidden="true" title="单击反对，再次点击取消"></i>
                <small class="text-secondary">投票</small>
            </div>
        </div>
        <div class="col-md-11">
            <p>{{ question.get_markdown|safe }}</p>
            <div class="question-user pull-right">
                <a href="{% url 'users:detail' question.user.username %}">{{ question.user.get_profile_name }} </a>
                <span class="text-secondary"> {{ question.created_at|timesince }}之前提问</span>
                {% if question.tags.names %}
                    {% for tag in question.tags.names %}
                        <span class="badge badge-primary">{{ tag }}</span>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
        <a href="{% url 'qa:propose_answer' question.id %}" class="btn btn-primary pull-right" role="button">提交回答</a>
    </div>

    <div class="page-header">
        <h1>回答</h1>
    </div>
    <div class="row">
        <ul class="col-md-12">
            {% for answer in question.answer_set.all %}
                {% include 'qa/answer_sample.html' with answer=answer %}
            {% empty %}
                <div class="text-center">
                    <h4>目前没有回答</h4>
                </div>
            {% endfor %}
        </ul>
    </div>
{% endblock content %}


{% block js %}
    <script src="{% static 'js/qa.js' %}" type="text/javascript"></script>
{% endblock js %}
